<template>
  <div>
    <el-container>
      <!-- nav导航栏 -->
      <el-header>
        <el-menu
          :default-active="active"
          mode="horizontal"
          text-color="#303133"
          router
        >
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/poverty">贫困户</el-menu-item>
          <el-menu-item index="/policy">扶农政策</el-menu-item>
          <el-menu-item index="/volunteer">志愿者招娉</el-menu-item>
          <el-menu-item index="/message">留言反馈</el-menu-item>
          <el-menu-item index="/user">个人中心</el-menu-item>
          <el-menu-item index="/main">后台管理</el-menu-item>
          <div>
            <span>扶农助农政策管理系统</span>
            <i
              class="el-icon-user-solid"
              style="font-size: 28px; margin-left: 50px"
            ></i>
            <span style="font-size: 14px; margin-left: 20px; color: #a0c9f3"
              >用户名:{{userList.username}}</span
            > 
            <el-button
              type="danger"
              size="mini"
              style="margin-left: 20px"
              @click="outLogin"
              >退出登录</el-button
            >
          </div>
        </el-menu>
      </el-header>
      <!-- 内容 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Welcome",
  data() {
    return {
      active: "",
      userList:{}
    };
  },
  methods: {
    outLogin() {
      this.$router.push("/login");
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("vuex");
    },
  },
  watch: {
    $route: {
      handler(val) {
        this.active = "/" + val.path.split("/")[1];
      },
      immediate: true,
      deep: true,
    },
  },
  mounted(){
    this.userList = this.$store.state.login.loginName
  }
};
</script>

<style lang="scss" scoped>
.el-header {
  color: #333;
  text-align: center;
  line-height: 70px;
  // height: 78px !important;
  padding: 0px;
}
.el-main {
  border: none;
  color: #333;
  text-align: center;
  height: 642px;
  padding: 0px;
}
.el-menu {
  width: 100%;
  background-image: linear-gradient(
    to top,
    #cfd9df 0%,
    #e2ebf0 100%
  ) !important;
}
.el-menu-item {
  // margin: 10px 0px 0px 10px !important;
  font-size: 15px;
  font-weight: 500;
}
span {
  margin-left: 60px;
  font-size: 28px;
  font-weight: 800 !important;
  color: rgb(5, 39, 105);
}
</style>